<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>充值续费</title>
    <link rel="stylesheet" href="css/common2.css">
    <link rel="stylesheet" href="css/urlty.css">
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <style scoped>
        .renewPay {
            position: relative;
            width: 100%;
        }

        .banner-img {
            width: 100%;
        }

        .box {
            position: absolute;
            width: 60%;
            left: 50%;
            top: 77%;
            transform: translate(-50%);
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 18px;
            box-shadow: 0px 2px 4px 1px #d7e6fb;
        }

        .title {
            padding: 4px 16px;
            color: #4cbff5;
            border-radius: 4px;
            background-color: #e4f5fc;
            display: flex;
            align-items: center;
        }

        .t-icon {
            width: 20px;
            line-height: 20px;
            height: 20px;
            text-align: center;
            border-radius: 50%;
            margin-right: 6px;
            border: 1px solid #4cbff5;
        }

        .title-fu {
            margin-top: 20px;
            padding: 2px 16px;
            border-radius: 4px;
            font-size: 16px;
            color: #e9e9e9;
            background-color: #e63f58;
        }

        .year-box {
            display: flex;
            color: black;
            flex-wrap: wrap;
            width: 80%;
        }

        .year {
            width: 30%;
            margin-top: 20px;
            border: 2px solid #eee;
            margin-right: 2%;
            text-align: center;
            font-size: 15px;
            border-radius: 2px;
        }

        .year:nth-child(3n) {
            margin-right: 0;
        }

        .y-top {
            border-bottom: 1px solid #eee;
            padding: 24px 0;
        }

        .active {
            color: #69bbf4;
            border: 2px solid #69bbf4;
        }

        .y-t-text {
            font-size: 30px;
        }

        .y-bottom {
            padding: 4px 0;
            font-size: 16px;
        }

        .bottom {
            width: 80%;
            margin-top: 20px;
            padding: 16px 20px;
            box-sizing: border-box;
            position: relative;
            border: 2px solid #eee;
            color: black;
        }

        .b-left {
            position: absolute;
            top: 16px;
            left: -2px;
            font-size: 13px;
            background-color: #eee;
            display: flex;
            align-items: center;
            color: black;
            border-left: 2px solid #9d9d9d;
        }

        .b-l-img {
            width: 20px;
            height: 20px;
            margin-left: 4px;
        }

        .qr {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .qr-border {
            border: 1px solid #eee;
            padding: 5px;
            width: 142px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .qr-bottom {
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

        .q-b-img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        .price {
            position: absolute;
            top: 50%;
            right: 10%;
            font-size: 12px;
        }

        .p-num {
            font-size: 28px;
        }
    </style>

</head>

<body>
    <div id="renewPay" class="renewPay" :style="{display:'block'}">
        <img class="banner-img" src="./image/renewPay/banner.png" alt="">
        <div class="box">
            <div class="title">
                <span class="t-icon">!</span>你的账号已于{{time}}到期，如需继续使用请续费
            </div>
            <div class="title-fu">
                选择续费年限:
            </div>
            <div class="year-box">
                <div class="year" v-for="it in meal" :key="it.id" :class="{'active':it.id==index}"
                    @click="selectYaer(it)">
                    <div class="y-top">￥<span class="y-t-text">{{it.packageAmount}}</span></div>
                    <div class="y-bottom" style="color: #707381;">{{it.mealName}}年</div>
                </div>
            </div>
            <div class="bottom">
                <div class="b-left">
                    <img class="b-l-img" src="./image/renewPay/qr.png" alt="">在线支付
                </div>
                <div class="qr">
                    <div class="qr-border">
                        <div class="q-img" id="qrcode" ref="qrcode">
                        </div>
                    </div>

                    <div class="qr-bottom">
                        <img class="q-b-img" src="./image/renewPay/zfb.png" alt="">
                        <img class="q-b-img" src="./image/renewPay/wx.png" alt="">
                        支付宝/微信扫码支付
                    </div>
                    <div class="price">
                        应付金额：<span class="p-num">{{price}}</span>元
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/list.js"></script>
    <script>
        var app = new Vue({
            el: '#renewPay',
            data: {
                urls: {
                    list: '/pc/school/list',
                    del: '/pc/school/del'
                },
                meal: [],//套餐
                index: '',
                time: '',//时间
                price: '',//价格
                orderItem: {},//某个套餐
                qrcodeUrl: '',//二维码路径
                userName: '',//学校账号
                qrimg: null,
            },
            created: function () {
                var s = sessionStorage
                this.userName = s['hxt-u']
                //获取套餐
                axios.postForm('/api/getMenu', { username: this.userName }).then(function (res) {
                    this.meal = res.data.setMenus;
                    var times = res.data.expiryDate.split(' ');
                    // var times2=times[0].split('-');
                    this.time = times[0]
                    this.price = res.data.setMenus[0].packageAmount
                    this.orderItem = res.data.setMenus[0]
                    this.index=res.data.setMenus[0].id
                    this.getUrl()
                }.bind(this));

            },
            mounted() {
                // this.createQr()
            },
            methods: {
                // 选择年份套餐
                selectYaer: function (it) {
                    this.index = it.id;
                    this.price = it.packageAmount;
                    this.orderItem = it
                    this.clearQRCodeInstance()
                    this.getUrl()
                },
                // createTime: function (school) {
                //     return dayjs(school.id / 4096 + 1.56E12).format('YYYY-MM-DD HH:mm:ss');
                // },
                // 获取二维码地址
                getUrl: function () {
                    axios.postForm('/api/pay_qrCode', { username: this.userName, fee1: this.price * 100,menuid: this.orderItem.id}).then(function (res) {
                        this.qrcodeUrl = res.data
                        var arr = res.data.split('?');
                        var arr2 = arr[2].split('=')
                        var arr3 = arr2[1].split(',')
                        this.orderItem.outTreadNo = arr3[0]
                        this.createQr()
                    }.bind(this));
                },

                //创建二维码
                createQr: function () {
                    const qrcodeDiv = this.$refs.qrcode;
                    const qrcodeText = this.qrcodeUrl;
                    const qrcodeOptions = {
                        width: 140,
                        height: 140,
                    };
                    this.qrimg = new QRCode(qrcodeDiv, {
                        text: qrcodeText,
                        ...qrcodeOptions,
                    });
                    this.inquireOrder()
                },
                clearQRCodeInstance() {
                    // 清除二维码实例
                    if (this.qrimg) {
                        this.qrimg.clear();
                        this.$nextTick(() => {
                            let dom = this.$refs.qrcode
                            while (dom.firstChild) { dom.removeChild(dom.firstChild) }
                        });
                    }
                },
                //查询订单状态
                inquireOrder: function () {
                    var mysetInterval = setInterval(() => {
                        axios.postForm('/api/QueryOrder', { outTreadNo: this.orderItem.outTreadNo,username:this.userName, year: this.orderItem.mealName }).then(function (res) {
                            if (res.data.code == 0) {
                                clearInterval(mysetInterval);
                                alert('支付成功,返回登录页登录')
                                location.href = "/";
                                // if (confirm('支付成功,返回登录页登录')) {
                                    // location.href = "/";
                                // } else { }
                            }
                        }.bind(this));
                    }, 2000);
                    setTimeout(() => {
                        clearInterval(mysetInterval);
                    }, 180000);
                }
            }
        });
    </script>
</body>

</html>